<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../../react资料_stu/依赖包/babel.min.js"></script>

</head>

<body>
  <div id="app">

  </div>
</body>
<script type="text/babel">

  class Fn extends React.Component {
    //原来class给实列扩展属性的样式
    // constructor(){
    //   this.name =
    //   super()
    // }
    //ES8
    //直接给实列扩展属性方法
    //缺点不能传参
    // jk = { age: 18 }
    //改变state上的属性 可以重新渲染
    // state 可以影响虚拟DOM的渲染 被称为当前组件的状态
    state={
      content:"hh",
      ishot:true
    }
    //render 在 Fn 函数的原型对象上
    //this.state.content
    //this 是组件实列
    //它会找 FN 函数 的原型对象
    render() {
      //改变state触发了 render方法 重新渲染了
      {console.log(this)}
      //解构写法
      //this.state 组件实列的state属性
      const {content , ishot} = this.state
      return (<div>
        <h1>我是组件实列</h1>
        <h2>{content}</h2>
        <h2>{ishot?"热啊":"冷啊"}</h2>
        
      </div>)
    }


  }

  const root = ReactDOM.createRoot(document.getElementById('app'));

  root.render(<Fn />)




</script>


</html>